<template>
  <div>
    <h3>vuex</h3>
    <h1>{{ num }}</h1>
    <button @click="add">加1</button>
    <button @click="jian">减1</button>
    <button @click="oddAdd">如果是奇数+1</button>
    <button @click="evenJian">如果是偶数-1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    add() {
      this.num += 1;
    },
    jian() {
      this.num -= 1;
    },
    oddAdd() {
      // 先判断this.num是奇数还偶数
      // 取模 取余
      // this.num % 2 == 1 ? 加1 ：不变
      if (this.num % 2 == 1) {
        this.num += 1;
      }
    },
    evenJian() {
      if (this.num % 2 == 0) {
        this.num -= 1;
      }
    },
  },
};

/* 
vuex 存放公共状态（数据的）vue插件
state 专门存放数据的方法
mutations 直接更改（更新）state中数据的方法的对象
actions 间接更改state数据的方法 actions需要去调用     mutations当中的方法去更改state中的值
getters 包含了多个计算数据的方法


需求：做一个计算器
奇数 不能被2整除的称为奇数
偶数 能被2整除的称为偶数
按钮有四个  加 减  如果是奇数+1  如果是偶数-1
vuex
state  num
mutations add jian
actions oddAdd(add)  evenJian(jian)
getters 判断奇数 偶数 num % 2 == 1?"奇数":"偶数"



*/
</script>

<style lang="scss" scoped>
</style>